<template>
<el-dialog :append-to-body="true" :title="logData.title" :visible.sync="logData.show" width="1000px" :close-on-click-modal="false">
    <el-tabs type="border-card" class="checkLog">
        <el-tab-pane v-for="(item, i) in list" :key="i">
            <template slot="label">
                <div class="tab-name">
                    <template v-if="item.name.length>18">
                        <el-tooltip effect="dark" :content="item.name" placement="top-start">
                            <span class="tab-name">{{item.name}}</span>
                        </el-tooltip>
                    </template>
                    <template v-else>{{item.name}}</template>
                </div>
            </template>
            <div class="log-box">
                <span v-for="(subItem, n) in item.arr" :key="n">{{subItem}}</span>
            </div>
        </el-tab-pane>
    </el-tabs>
</el-dialog>
</template>

<script>
export default {
    name: 'CheckLogs',
    props: {
        logData: {
            type: Object
        }
    },
    data () {
        return {
            list: []
        }
    },
    created () {
        let arr = this.logData.data
        for (let i = 0; i < arr.length; i++) {
            let subArr = []
            let { logs, containerName } = arr[i].containerLog
            for (let n = 0; n < logs.length; n++) {
                subArr.push(...logs[n].logContent)
            }
            this.list[i] = {
                name: containerName,
                arr: subArr
            }
        }
    }
}
</script>
<style lang="less">
    .checkLog {
        box-shadow: none;
        .log-box {
            font-size: 12px;
            height: 500px;
            color: #4a4a4a;
            display: flex;
            flex-direction: column;
            line-height: 24px;
            span {
                white-space: pre-wrap;
            }
        }
        .el-tabs__header {
            height: 39px;
        }
        .tab-name {
            display: inline-block;
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
</style>
